<template>
  <el-dialog
    title="产品详情"
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    width="1000px"
    append-to-body
    @close="handleClose"
  >
    <el-descriptions :column="2" border>
      <el-descriptions-item label="产品编码">
        {{ productData.productCode }}
      </el-descriptions-item>
      <el-descriptions-item label="产品名称">
        {{ productData.productName }}
      </el-descriptions-item>
      <el-descriptions-item label="所属品类">
        {{ getCategoryName(productData.categoryId) }}
      </el-descriptions-item>
      <el-descriptions-item label="产品型号">
        {{ productData.model }}
      </el-descriptions-item>
      <el-descriptions-item label="制造商">
        {{ productData.manufacturer }}
      </el-descriptions-item>
      <el-descriptions-item label="版本号">
        {{ productData.version }}
      </el-descriptions-item>
      <el-descriptions-item label="连接协议">
        <el-tag :type="getProtocolTag(productData.protocol)">{{ productData.protocol }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="数据格式">
        <el-tag :type="getDataFormatTag(productData.dataFormat)">{{ productData.dataFormat }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="认证方式">
        {{ getAuthTypeName(productData.authType) }}
      </el-descriptions-item>
      <el-descriptions-item label="加密方式">
        {{ getEncryptTypeName(productData.encryptType) }}
      </el-descriptions-item>
      <el-descriptions-item label="Topic前缀">
        {{ productData.topicPrefix }}
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="productData.status === '1' ? 'success' : 'warning'">
          {{ productData.status === '1' ? '已发布' : '开发中' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="设备生命周期">
        {{ productData.deviceLifecycle }}天
      </el-descriptions-item>
      <el-descriptions-item label="数据保存时长">
        {{ productData.dataRetention }}天
      </el-descriptions-item>
      <el-descriptions-item label="支持OTA">
        <el-tag :type="productData.supportOta ? 'success' : 'info'">
          {{ productData.supportOta ? '是' : '否' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="支持网关">
        <el-tag :type="productData.supportGateway ? 'success' : 'info'">
          {{ productData.supportGateway ? '是' : '否' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="产品图标" :span="2">
        <img v-if="productData.iconUrl" :src="productData.iconUrl" class="product-icon" />
        <span v-else>暂无图标</span>
      </el-descriptions-item>
      <el-descriptions-item label="产品描述" :span="2">
        {{ productData.description || '暂无描述' }}
      </el-descriptions-item>
      <el-descriptions-item label="通信配置" :span="2">
        <pre v-if="productData.communicationConfig" class="config-text">{{ formatJson(productData.communicationConfig) }}</pre>
        <span v-else>暂无配置</span>
      </el-descriptions-item>
      <el-descriptions-item label="扩展配置" :span="2">
        <pre v-if="productData.extendConfig" class="config-text">{{ formatJson(productData.extendConfig) }}</pre>
        <span v-else>暂无配置</span>
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">
        {{ productData.remark || '暂无备注' }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ productData.createTime }}
      </el-descriptions-item>
      <el-descriptions-item label="更新时间">
        {{ productData.updateTime }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// Props
interface Props {
  visible: boolean
  productData: any
}

const props = withDefaults(defineProps<Props>(), {
  productData: () => ({})
})

// Emits
const emit = defineEmits(['update:visible'])

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 获取品类名称
const getCategoryName = (categoryId: string) => {
  const categoryMap: Record<string, string> = {
    'CAT001': '智能家居',
    'CAT002': '智能门锁',
    'CAT003': '工业网关',
    'CAT004': '智能摄像头',
    'CAT005': '环境监测器'
  }
  return categoryMap[categoryId] || categoryId
}

// 获取协议标签类型
const getProtocolTag = (protocol: string) => {
  const tagMap: Record<string, string> = {
    'mqtt': 'success',
    'coap': 'warning',
    'http': 'info',
    'tcp': 'primary',
    'udp': 'danger',
    'modbus': 'success'
  }
  return tagMap[protocol] || 'info'
}

// 获取数据格式标签类型
const getDataFormatTag = (dataFormat: string) => {
  const tagMap: Record<string, string> = {
    'json': 'success',
    'custom': 'warning',
    'modbus': 'info'
  }
  return tagMap[dataFormat] || 'info'
}

// 获取认证方式名称
const getAuthTypeName = (authType: string) => {
  const authMap: Record<string, string> = {
    'device_secret': '设备密钥',
    'certificate': '证书认证',
    'none': '免认证'
  }
  return authMap[authType] || authType
}

// 获取加密方式名称
const getEncryptTypeName = (encryptType: string) => {
  const encryptMap: Record<string, string> = {
    'none': '无加密',
    'aes': 'AES',
    'rsa': 'RSA',
    'tls': 'TLS'
  }
  return encryptMap[encryptType] || encryptType
}

// 格式化JSON
const formatJson = (jsonStr: string) => {
  try {
    const obj = typeof jsonStr === 'string' ? JSON.parse(jsonStr) : jsonStr
    return JSON.stringify(obj, null, 2)
  } catch (e) {
    return jsonStr
  }
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.product-icon {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
}

.config-text {
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.dialog-footer {
  text-align: right;
}
</style>